<template>
	<view>
		<z-paging-swiper style="flex: 1;">
			<template #top>
				<view class="status_bar"></view>
				<view style="display: flex; flex-direction: row; background-color: #fff;">
					<z-tabs tab-width="120" ref="tabs" :list="tabList" :current="current" @change="tabsChange"
						active-color="#ab7aff" :active-style="{'font-size':'40rpx'}" :tabs-style="{'width':'300rpx'}" />
				</view>
			</template>
			<swiper class="swiper" :current="current" @transition="swiperTransition"
				@animationfinish="swiperAnimationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<home-item :tabIndex="index" :currentIndex="current"></home-item>
				</swiper-item>
			</swiper>
		</z-paging-swiper>

		<uni-popup type="bottom" ref="pay" :is-mask-click="false">
			<view class="popup">
				<view class="title">
					为什么要支付
				</view>
				<view class="tip">
					为过滤非诚意用户，避免微商，酒托，广告等骚扰，打造纯净私密的交友空间，保证产品持续稳定运营。需支付一定费用，成为会员
				</view>
				<view class="price">
					￥{{ticketPrice}}
				</view>
				<view class="type" v-for="(item, index) in payTypes" :key="index" @click="onItemPay(index)">
					<image :src="item.icon"></image>
					<view class="tip">{{item.title}}</view>
					<zy-checkbox :checked="item.checked"></zy-checkbox>
				</view>
				<view>
					<zy-button text='确定支付' @click.native="requestPay"></zy-button>
				</view>
			</view>
		</uni-popup>

		<uni-popup type="bottom" ref="free" :is-mask-click="false">
			<view class="popup-free">
				<view class="title">
					温馨提示
				</view>
				<view class="tip">
					新用户赠送三分钟使用时间，请用户尽快使用哦。
				</view>
				<view>
					<zy-button text='免费体验' @click.native="onTicketFree"></zy-button>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import constant from '@/common/constant.js';

	export default {
		data() {
			return {
				tabList: ['活跃', '新注册'],
				current: 0,
				payTypes: [{
					payType: 2,
					icon: this.getImageUrl('pay_wechat.png'),
					title: '微信支付',
					checked: false
				}, ],
				alipayTypes: [{
						payType: 1,
						icon: this.getImageUrl('pay_alipay.png'),
						title: '支付宝支付',
						checked: false
					},
					{
						payType: 2,
						icon: this.getImageUrl('pay_wechat.png'),
						title: '微信支付',
						checked: false
					},
				],
				payType: '',
				projectId: 4,
				ticketPrice: '28',
				disablePay: false
			};
		},
		onLoad() {
			this.requestCity();
			this.requestUser();
			this.requestWhiteIp();
			let isaliPay = uni.getStorageSync('isaliPay');
			if (1 == isaliPay) {
				this.payTypes = this.alipayTypes
			}
		},
		onShow() {
			setTimeout(() => {
				this.showDialogTicket(); //为啥要延迟，防止读写配置文件慢于
			}, 500)
		},
		methods: {
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			//swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			onItemPay(index) {
				this.payTypes.forEach(item => {
					item.checked = false
				});
				this.payTypes[index].checked = true;
			},
			async showDialogTicket() {
				let showFlag = "1";
				let vipManage = uni.getStorageSync("vipManage");
				console.log('vipManage: ', vipManage);
				if (1 == vipManage || 2 == vipManage) {
					let res = await this.$common.post("/app/tickUserInfo/info");
					if (0 == res.code) {
						if (2 == res.data.windowTicket && !uni.getStorageSync('vip')) {
							if (
								1 == vipManage //门票开
								||
								getApp().globalData.openTicketMin //门票3分钟:已到
								||
								uni.getStorageSync("ticketOver" + uni.getStorageSync('userId'))) //门票3分钟已到：再次启动
							{
								showFlag = "2";
								let ticketRes = await this.$common.post("/app/tickPrice/info");
								if (0 == ticketRes.code) {
									this.ticketPrice = ticketRes.data.price;
									this.projectId = ticketRes.data.id;
								}
							} else {
								if(!uni.getStorageSync("ticketFree" + uni.getStorageSync('userId'))){
									showFlag = "3";
								}
							}
						}
					}
				}
				console.log('showFlag: ', showFlag);
				if ("2" == showFlag) {
					uni.hideTabBar()
					this.$refs.pay.open()
				}else if ("3" == showFlag) {
					uni.hideTabBar()
					this.$refs.free.open()
				} else {
					uni.showTabBar()
					this.$refs.pay.close()
					this.$refs.free.close()
				}
			},
			onTicketFree() {
				uni.showTabBar()
				this.$refs.free.close()
				getApp().toTicket();
				uni.setStorageSync("ticketFree" + uni.getStorageSync('userId'), true)
			},
			async requestPay() {
				console.log('this.disablePay', this.disablePay);
				if (this.disablePay) {
					return
				}
				console.log('this.disablePay', '111111');
				this.disablePay = true

				let payType = '';
				this.payTypes.forEach(item => {
					if (item.checked) {
						payType = item.payType;
					}
				});
				if (!payType) {
					uni.showToast({
						title: '请选择支付类型',
						icon: 'none'
					})
					this.disablePay = false
					return
				}

				let url = '/api/aliPayVersion3/transactionsH5';
				if (2 == payType) {
					url = '/api/wechatVersion3/rechargeH5';
				}
				const params = {
					type: '3',
					projectId: this.projectId
				}
				let res = await this.$common.post(url, params);
				if (0 == res.code) {
					if (2 == payType) {
						const webview = plus.webview.create('', 'custom-webview');
						webview.loadURL(res.data.payUrl, {
							'Referer': 'http://api.ptszyxx.com://'
						});
					} else {
						getApp().globalData.webUrl = res.data.payUrl;
						uni.navigateTo({
							url: '/main/web/web'
						})
					}
					setTimeout(() => {
						this.disablePay = false
					}, 5000)
				} else {
					this.disablePay = false
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async requestUser() {
				let res = await this.$common.post('/app/usermessage/getMessage');
				if (0 == res.code) {
					if (1 == res.data.vipMap.isVip) {
						uni.setStorageSync('vip', true)
					} else {
						uni.setStorageSync('vip', false)
					}
				}
			},
			async requestCity() {
				let res = await this.$common.post('/api/ipGetAddress/getAddress');
				if (res.code == 0) {
					const result = res.data.data.result;
					let city = res.data.data.result.city;
					uni.setStorageSync('city', city)
				}
			},
			async requestWhiteIp() {
				let account = uni.getStorageSync('userLoginname');
				if (account) {
					let params = {
						account: account
					}
					let res = await this.$common.post('/api/ip/isWhiteIp', params);
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.swiper {
		height: 100%;
	}

	.popup {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: white;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		height: 550rpx;
		padding: 30rpx;

		.title {
			font-size: 36rpx;
			color: #222;
			line-height: 60rpx;
			height: 60rpx;
			text-align: center;
		}

		.tip {
			font-size: 20rpx;
			color: #888;
		}

		.price {
			font-size: 50rpx;
			color: mediumvioletred;
			text-align: center;
		}

		.type {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
			color: #222;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.tip {
				font-size: 28rpx;
				color: #555;
				flex: 1;
				text-align: left;
			}

		}
	}

	.popup-free {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: white;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		height: 180rpx;
		padding: 100rpx;

		.title {
			font-size: 36rpx;
			color: #222;
			line-height: 60rpx;
			height: 60rpx;
			text-align: center;
			margin-top: 50rpx;
		}

		.tip {
			font-size: 32rpx;
			color: #555;
			margin-top: 30rpx;
			margin-bottom: 70rpx;
		}
	}
</style>